<template>
    <div>
        <!-- seatLayout -->
        <el-row>
            <el-col :span="24">
                <div class="container">
                    <el-row>
                        <el-col :span="24" class="table-fun">
                            <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="refresh">刷新</div>
                            <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="amWin=true;winTitle='添加'">添加</div>
                            <img src="../../assets/imgs/operation_icon_xiugai_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="amWin=true;winTitle='修改'">修改</div>
                            <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title2 fun-text" @click="del">删除</div>
                        </el-col>
                    </el-row>
                    <!-- 表格内容 -->
                    <avue-crud :data="seatList[0].data" :option="seatList[0].option" @current-row-change="rowChange" :page="seatList[0].page" @current-change="seatPage"></avue-crud>
                    <!-- 弹窗 -->
                    <div class="modal-win" v-show="amWin">
                      <!-- 标题栏 -->
                      <el-row class="add-title">
                          <div class="closeWin" @click="amWin=false">X</div>
                          <el-col :span="24">
                              <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt=""><span class="add-text">{{winTitle}}</span>
                          </el-col>
                      </el-row>
                      <!-- 信息栏 -->
                      <el-row class="seatMsg-win">
                        <!-- 表单栏 -->
                        <el-col :span="8">
                          <avue-form ref="form" v-model="seatMsgForm.data" :option="seatMsgForm.option" class="yz-form"></avue-form>
                        </el-col>
                        <el-col :span="8" class="seat-middle"></el-col>
                        <el-col :span="7" class="seat-middle" :offset="1">
                          <div class="kaung-title" v-show="winTitle=='添加'">框选座以编辑座位分区</div>
                          <avue-form ref="form" v-model="modForm.data" :option="modForm.option" v-show="winTitle=='修改'" class="yz-form"></avue-form>
                        </el-col>
                      </el-row>
                      <button class="check-btn rf" @click="amWin=false"><img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                      <button class="check-btn rf" @click="winTitle=='添加'?add():update()"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确认</button>
                    </div>
                </div>
            </el-col>
        </el-row>
        
    </div>
</template>

<script>
import qs from "qs";
import TableData from "../../components/common/tableData"
export default {
  data: function() {
    return {
      activeTag:"5-4",
      seatList: [
        {
           page: {
            pageSizes: [10],
            total: 2,
            currentPage: 1,
            pageSize: 10
          },
          data: [],
          option: {
            highlightCurrentRow:true,
            page: true,
            stripe: true,
            menu: false,
            align: "center",
            menuAlign: "center",
            column: []
          }
        }
      ],
      addRules: {
        seat_define_str: "1",
        "seatLayout.layout": "2",
        "seatLayout.name": "abc",
        "seatLayout.all_seat": "50"
      },
      currentRow:"",
      amWin:false,
      winTitle:"test",
      seatMsgForm:{
        data:[],
        option:{
          column:[
            {
              label:"布局名称",
              prop:"layoutName",
              span:24
            },
            {
              label:"座位数",
              prop:"seatCount",
              span:24
            },
            {
              label:"布局行数",
              prop:"rowCount",
              span:24
            },
            {
              label:"布局列数",
              prop:"colCount",
              span:24
            },
            {
              label:"备注",
              prop:"remark",
              type:"textarea",
              span:24
            },
          ]
        }
      },
      modForm:{
        data:{},
        option:{
          column:[
            {
              label:"区域名称",
              prop:"placeName",
              span:"24"
            },
            {
              label:"字体颜色",
              prop:"fontColor",
              type:"colorPicker",
              span:"24"
            },
            {
              label:"区域底色",
              prop:"placeColor",
              span:"24"
            },
          ]
        }
      }
    };
  },
  methods: {
    seatPage(val){
      this.seatList[0].page.currentPage=val;
      this.getSeatList();
    },
    getSeatList() {
      this
        .postRequest("/sch/data/seatlayout/list",{
          rows:10,
          page:this.seatList[0].page.currentPage
        })
        .then(data => {
          this.seatList[0].page.total=data.data.totalRow
          this.seatList[0].data=data.data.list;
        });
    },
    refresh() {
      this.getSeatList();
    },
    add() {
      this
        .postRequest(
          "/sch/data/seatlayout/add",{
            "seatLayout.layout":{"c":[{"id":1,"x":1,"y":1},{"id":2,"x":2,"y":1},{"id":2,"x":1,"y":2},{"id":3,"x":2,"y":2}],"s":[{"id":1,"label":1,"x":1,"y":1,"status":0,"sty":"sl-seat-status-KE_SHOU"},{"id":2,"label":2,"x":2,"y":2,"status":0,"sty":"sl-seat-status-KE_SHOU"}]},
            "seatLayout.name":this.seatMsgForm.data.layoutName,
            "seatLayout.all_seat":this.seatMsgForm.data.seatCount,
            "seatLayout.end_seat":"2",
            "seatLayout.cell_row":this.seatMsgForm.data.rowCount,
            "seatLayout.cell_col":this.seatMsgForm.data.colCount,
            "seatLayout.remarks":this.seatMsgForm.data.remark,
          }
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getZdList();
            this.amWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    update() {
      this
        .postRequest(
          "/sch/data/seatlayout/update",{
            "seat_define_str": {"1":{"id":1,"label":1,"x":1,"y":1,"status":0,"sty":"sl-seat-status-KE_SHOU","selected":false},"2":{"id":2,"label":2,"x":2,"y":2,"status":0,"sty":"sl-seat-status-KE_SHOU","selected":false}},
            "seatLayout.layout":{"c":[{"id":1,"x":1,"y":1},{"id":2,"x":2,"y":1},{"id":2,"x":1,"y":2},{"id":3,"x":2,"y":2}],"s":[{"id":1,"label":1,"x":1,"y":1,"status":0,"sty":"sl-seat-status-KE_SHOU"},{"id":2,"label":2,"x":2,"y":2,"status":0,"sty":"sl-seat-status-KE_SHOU"}]},
            "seatLayout.name":this.seatMsgForm.data.layoutName,
            "seatLayout.all_seat":this.seatMsgForm.data.seatCount,
            "seatLayout.end_seat":"2",
            "seatLayout.cell_row":this.seatMsgForm.data.rowCount,
            "seatLayout.cell_col":this.seatMsgForm.data.colCount,
            "seatLayout.remarks":this.seatMsgForm.data.remark,
          }
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            this.getZdList();
            this.amWin=false;
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    del() {
      this
        .postRequest(
          "/sch/data/seatlayout/del",{
            id:this.currentRow.id
          }
        )
        .then(data => {
          if (data.data[0] == 0) {
            this.$message({
              message: data.data[1],
              type: "success"
            });
            // this.getZdList();
            this.refresh();
          } else {
            this.$message.error(data.data[1]);
          }
        });
    },
    tableCreate() {
      this.seatList[0].option.column.push(
        {
          label: "布局名称",
          prop: "name"
        },
        {
          label: "座位数",
          prop: "all_seat"
        },
        {
          label: "备注",
          prop: "remarks"
        },
      );
    },
    rowChange(val){
      console.log(val);
      this.currentRow=val;
      this.seatMsgForm.data.layoutName=val.name;
      this.seatMsgForm.data.seatCount=val.all_seat;
      this.seatMsgForm.data.rowCount=val.cell_row	;
      this.seatMsgForm.data.colCount=val.cell_col;
      this.seatMsgForm.data.remark=val.remarks;
    }
  },
  computed: {},
  components:{TableData},
  watch: {
      winTitle(){
        if(this.winTitle=="添加"){
          this.seatMsgForm.data.layoutName="";
          this.seatMsgForm.data.seatCount="";
          this.seatMsgForm.data.rowCount="";
          this.seatMsgForm.data.colCount="";
          this.seatMsgForm.data.remark="";
        }
      }

  },
  mounted() {
    console.log("seatLayout");
    this.$emit("sendActive",this.activeTag);
    this.tableCreate();
    this.getSeatList();
  }
};
</script>
<style scoped src="../../assets/css/service/seatLayout.css">

</style>